<template>
  <div class="all">
    <div class="charge_txt">
      充值记录
    </div>

    <div class="charge_content">
      <div v-for="(item,index) in charge_log" :key="index" class="item">
        <div class="first">
          <div class="money">充值人充值{{item.amount}}元</div>
          <div class="save">余额{{item.after}}元</div>
        </div>
        <div class="second">
          <div class="mome">备注:充值人充值{{item.amount}}元</div>
          <div class="time">{{item.date}}</div>
        </div>
      </div>
      <van-pagination class="page_style" @change="changePage" v-model="currentPage" :total-items="total" :items-per-page="10" />
    </div>
  </div>
</template>

<script>
  import {
    ChargeService
  } from '@/api'
  export default {
    data() {
      return {
        charge_log: [],
        currentPage: 1,
        total: 0,
      }
    },
    methods: {
      init() {
        ChargeService.finance_logs({
          franchisee_id: this.$route.query.id,
          page: this.currentPage,
          limit: 10,
          type: 'recharge'
        }, ).then(res => {
          console.log(res);
          this.total = res.data.total;
          this.charge_log = res.data.data;
        })
      },
      changePage(value){
        this.currentPage = value;
        this.init();
      }
    },
    mounted() {
      this.init();
    },
  }
</script>

<style lang="less" scoped>
  .all {
    margin: 0;
    padding: 40px 24px;
    background-color: #f3f5f7;
    min-height: calc(93vh);
    box-sizing: border-box;

    .charge_txt {
      color: rgba(51, 51, 51, 1);
      font-size: 24px;
      margin-bottom: 15px;
    }

    .charge_content {
      width: 702px;
      min-height: 218px;
      background-color: rgba(255, 255, 255, 1);
      border-radius: 16px;
      padding: 25px 32px;
      margin-bottom: 20px;

      .page_style{
        margin-top: 35px;
      }
      .item {
        padding-bottom: 20px;
        border-bottom: 1px solid rgba(238, 238, 238, 1);
        ;

        .first {
          display: flex;
          justify-content: space-between;
          color: rgba(51, 51, 51, 1);
          font-size: 20px;
        }

        .second {
          display: flex;
          justify-content: space-between;
          color: rgba(153, 153, 153, 1);
          font-size: 18px;
        }
      }
    }
  }
</style>